Vue3 配合 TypeScript 接入腾讯云滑块验证

字数

1034 字

阅读时间

5 分钟

引入 SDK

找到 index.html 在 <head> 标签中增加腾讯云验证器 SDK 引用 ./index.html:

html

<!-- 腾讯云：滑块验证 -->
<!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会影响程序的正常使用。 -->
<!-- 文档：https://cloud.tencent.com/document/product/1110/36841 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js" ></script>

封装 TypeScript 调用方法

为了兼容 TypeScript 类型提示，并且优雅的在 Vue3 中使用，我们用下面这个 .ts 文件对 SDK 的 TencentCaptcha 方法进行封装。

./src/util/sliderValidator.ts:

typescript

/** 验证结果 */
export type SliderValidatorResult = {
  /** 验证结果，0：验证成功。2：用户主动关闭验证码。 */
  ret: number

  /** 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。 */
  ticket: string

  /** 验证码应用ID */
  CaptchaAppId: string

  /** 自定义透传参数 */
  bizState: any

  /** 本次验证的随机串，请求后台接口时需带上 */
  randstr: string
}

/**
  # TencentCaptcha 的配置参数

  - res（用户主动关闭验证码）= `{ret: 2, ticket: null}`
  - res（验证成功） = `{ret: 0, ticket: string, randstr: string}`
  - res（客户端出现异常错误 仍返回可用票据） = `{ret: 0, ticket: string, randstr: string,  errorCode: number, errorMessage: string}`
*/
export type TencentCaptchaOptions = {

  /** 自定义透传参数，业务可用该字段传递少量数据，该字段的内容会被带入callback回调的对象中 */
  bizState?: any

  /** 开启自适应深夜模式 */
  enableDarkMode?: boolean

  /**
    # sdkOpts
    示例 `{"width": 140, "height": 140}`

    注: 只在移动端原生 webview 调用时传入，为设置的验证码元素 loading 弹框大小
  */
  sdkOpts?: { width: number; height: number }

  /**
    # ready
    验证码加载完成的回调, 回调参数为验证码实际的宽高。
    手机原生端可根据此值设置弹框大小。
  */
  ready?: (p: { sdkView: { width: number; height: number } }) => any
}

/** 腾讯验证码 */
declare class TencentCaptcha {
  constructor(appId: string, callback: (p: SliderValidatorResult) => any, options?: TencentCaptchaOptions)
  show(...params: any): any
}

// 复刻 Promise 下的 Resolve 和 Reject 类型
type Resolve = (value: SliderValidatorResult | PromiseLike<SliderValidatorResult>) => void
type Reject = (reason?: any) => void

// 返回值方法
export type ApplySlider = () => Promise<SliderValidatorResult>

/**
  腾讯滑块验证器
**/
export function sliderVerification(options?: TencentCaptchaOptions): ApplySlider {
  if (!TencentCaptcha) throw new Error('TencentCaptcha is not defined')

  let promise = {} as { resolve: Resolve; reject: Reject }
  let slider: TencentCaptcha
  onMounted(() => {
    slider = new TencentCaptcha(
      // App Id
      import.meta.env.VITE_TENCENT_CAPTCHA_APP_ID,
      // Callback
      (res: SliderValidatorResult) => {
        promise.resolve(res)
      },
      // Options
      options,
    )
  })

  return () => {
    return new Promise<SliderValidatorResult>((resolve, reject) => {
      slider.show()
      promise = { resolve, reject }
    })
  }
}

使用方法

vue

<script lang="ts" setup>
import { sliderVerification, ApplySlider } from '~/util/SliderValidator'
let applySlider: ApplySlider
// 初始化滑块验证器
// 初始化参数，参考 TencentCaptchaOptions
onMounted(() => { applySlider = sliderVerification() })

// 开始验证
async function onVerify() {
  const res = await applySlider()
  console.log('SliderValidatorResult:', res)
}
</script>
<template>
  <button @click="onVerify"> 滑块验证 </button>
</template>

这边会用到一个 import.meta.env.VITE_TENCENT_CAPTCHA_APP_ID 的参数，可以从从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建。

使用方法

vue

<script lang="ts" setup>
import { sliderVerification } from '~/util/sliderValidator'
// 初始化验证器实例
const applySlider = sliderVerification({
  // Options
  bizState: 'hello, slider!',
  enableDarkMode: true,
})
// 触发验证器
async function onVerify() {
  const res = await applySlider()
  console.log('SliderValidatorResult:', res)
}
</script>
<template>
  <!-- 将方法绑定到一个按钮 -->
  <button @click="onVerify">
    滑块验证
  </button>
</template>

Options 提供以下配置参数

配置名	值类型	说明
bizState	Any	自定义透传参数，业务可用该字段传递少量数据，该字段的内容会被带入callback回调的对象中
enableDarkMode	Boolean	开启自适应深夜模式
sdkOpts	Object	示例 `{"width": 140, "height": 140}` 注: 只在移动端原生webview调用时传入，为设置的验证码元素loading弹框大小
ready	Function	验证码加载完成的回调, 回调参数为验证码实际的宽高。手机原生端可根据此值设置弹框大小